<template>
  <div>
    <div class="content-box" style="width: 500px; position: relative; right: -250px;top: 100px;">
      <div class="tablebox" style="padding: 20px">
        <el-form ref="editform" label-width="80px" class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色名称：">
                <el-input v-model="user.username" auto-complete="off" style="width:300px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="用户管理：">
              <el-checkbox-group v-model="user.type">
                <el-checkbox label="查询" name="type"></el-checkbox>
                <el-checkbox label="添加" name="type"></el-checkbox>
                <el-checkbox label="禁用/启用" name="type"></el-checkbox>
                <el-checkbox label="修改" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="角色管理：">
              <el-checkbox-group v-model="user.type">
                <el-checkbox label="查询" name="type"></el-checkbox>
                <el-checkbox label="添加" name="type"></el-checkbox>
                <el-checkbox label="禁用/启用" name="type"></el-checkbox>
                <el-checkbox label="修改" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="日志管理：">
              <el-checkbox-group v-model="user.type">
                <el-checkbox label="查询" name="type"></el-checkbox>
                <el-checkbox label="查看详情" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="Packing Unit：">
              <el-checkbox-group v-model="user.type">
                <el-checkbox label="查询" name="type"></el-checkbox>
                <el-checkbox label="修改" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="系统管理：">
              <el-checkbox-group v-model="user.type">
                <el-checkbox label="查询" name="type"></el-checkbox>
                <el-checkbox label="添加新备份" name="type"></el-checkbox>
                <el-checkbox label="还原" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="接口管理：">
              <el-checkbox-group v-model="user.type">
                <el-checkbox label="查询" name="type"></el-checkbox>
                <el-checkbox label="添加" name="type"></el-checkbox>
                <el-checkbox label="查看密码" name="type"></el-checkbox>
                <el-checkbox label="修改" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
        </el-form>
        <el-button style="margin-left: 130px;" size="small" type="primary" @click="save()">确定</el-button>
        <el-button size="small" @click="$router.back()">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/fetch/api";


let id = 1000;
export default {
  name: "useredit",
  data() {
    return {
      user:{
        type:'',
      },
      role: {
        cRoleId: 0,
        cRoleName: "",
        createTime: "",
        endDate: "",
        remark: "",
        rolepermissionlist: [
          {
            cPermissionId: 0,
            cRoleId: 0,
            cRolePermissionId: 0
          }
        ],
        startDate: "",
        state: 0,
        updateTime: ""
      }
    };
  },
  computed: {
    userId() {
      return this.$route.params.id;
    },
    title() {
      return this.$route.params.id ? "编辑" : "添加";
    }
  },
  methods: {
    curry(e, node) {
      if (e.target.checked) {
        node.subDetail.forEach((sub, i) => {
          node.subDetail[i].checked = true;
        });
      } else {
        node.subDetail.forEach((sub, i) => {
          node.subDetail[i].checked = false;
        });
      }
    },
    // 获取所属权限
    getPermissionDetail() {
      api
        .PermissionPage({}, { limit: 0, pageIndex: 0 })
        .then(response => {
          if (response.status === 100) {
            response.result.list.forEach(res => {
              res.checked == 1 ? (res.checked = true) : (res.checked = false);
              res.subDetail.forEach(res => {
                res.checked == 1 ? (res.checked = true) : (res.checked = false);
              });
            });
            this.permissions = response.result.list;
            //alert(JSON.stringify(this.permissions));
            api.LocalStorageService.update("permissions", response.result.list);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    save() {
      if (!this.form.cRoleName) {
        this.$message.error("权限名不能为空");
      } else {
        api.RoleAdd(this.form).then(response => {
          if (response.status === 100) {
            this.$message.success(response.message);
            this.$router.back();
          } else {
            this.$message.error(response.message);
          }
        });
      }
    }
  },
  watch: {
    permissions: {
      deep: true,
      immediate: true,
      handler(val) {
        this.form.cPermissionIds = [];
        this.form.cDetailIds = [];
        let isChecked = [];
        val.forEach(menu => {
          if (menu.checked) {
            this.form.cPermissionIds.push(menu.cPermissionId);
          }
          menu.subDetail.forEach((sub, i) => {
            if (menu.subDetail[i].checked == true) {
              isChecked.push(menu.subDetail[i].checked);
            }
            if (sub.checked) {
              this.form.cDetailIds.push(sub.cDetailId);
            }
          });
          if (isChecked.length == 0) {
            menu.checked = false;
          }
        });
      }
    }
  },
  mounted() {
    //      this.getPermission();
    this.getPermissionDetail();
  },
  components: {}
};
</script>
<style lang="less" scoped>
</style>
